// <!-- 展示模板 -->
var template = `
<div>
    <div class="nav">
        <h1 class="title">{{appName}}!</h1>
        <p class="menu">
            <!--使用 router-link 组件进行导航 -->
            <!--通过传递 \`to\` 来指定链接 -->
            <!--\`<router-link>\` 将呈现一个带有正确 \`href\` 属性的 \`<a>\` 标签-->
            <router-link to="/">任务管理</router-link>
            <router-link to="/proxy">代理配置</router-link>
            <router-link to="/user">用户配置</router-link>
            <router-link to="/config">系统配置</router-link>
            <router-link to="/notify-email">通知邮箱</router-link>
        </p>
    </div>
    
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
    <!-- <a href="https://www.jianshu.com/p/b0c16bab3388">vue3使用is和v-is</a> -->
    <div v-is="'style'" scoped>
    </div>
    <Css></Css>
<!--    <HeartBeat></HeartBeat>-->
</div>
`;
// <!-- Vue 代码 -->

let tbl = {
    // 下载的文件html
    page: 'far-page',
    // 待下载的文件html
    pageNot: 'far-page-not',
    // 所有的文件url
    url: 'far-url',
    // 商品的信息
    item: 'far-item',
    // 商品错误的信息
    itemErr: 'far-item-err',
    // 商品的原始信息
    itemOrigin: 'far-item-origin',
    // 商品的分类信息
    itemType: 'far-item-type',
    // 图片的文件
    img: 'far-img',
    // 图片错误的文件
    imgErr: 'far-img-err',
    // 图片不用下载的文件
    imgNot: 'far-img-not',
    // 下载错误的文件
    err: 'far-err',
};

// mongodb 数据状态
let tbs = {
    ok: 1,  // 正常
    fail: 2,  // 失败
    exclude: 3,  // 排除
    not: null,  // 未下载
}

// mongodb 查询指令
let tbc = {
    in: '$in',  // 数组
    notIn: '$nin',  // 不在
    equal: '$eq',  // 等于
    notEqual: '$ne', // 不等于
    greatThan: '$gt', // 大于
    greatThanEqual: '$gte', // >=
    lessThan: '$lt',  // 小于
    lessThanEqual: '$lte', // <=
    startsWith: '$regex', // 开头
    like: '$regex', // 模糊查询
    notLike: '$not',  // 不模糊查询
    all: '$all',  // 全部
    addList: '$addToSet',  // 增加列表
    size: '$size',  // 大小
    exists: '$exists',  // 存在
    notExists: '$not',  // 不存在
    type: '$type',  // 类型
    mod: '$mod',  // 模
    elemMatch: '$elemMatch',
    geoNear: '$geoNear',
    geoWithin: '$geoWithin',
    geoIntersects: '$geoIntersects',
    text: '$text',
    where: '$where',
    comment: '$comment',
    slice: '$slice',
    and: '$and',
    or: '$or',
    nor: '$nor',
    set: '$set',
    push: '$push',
    pull: '$pull',
    addToSet: '$addToSet',
    pop: '$pop',
    pullAll: '$pullAll',
    inc: '$inc',
    mul: '$mul',
    min: '$min',
    max: '$max',
    currentDate: '$currentDate',
    dateToString: '$dateToString',
    stringToDate: '$stringToDate',
    bit: '$bit',
    textSearch: '$textSearch',
    project: '$project',
    group: '$group',
    sort: '$sort',
    limit: '$limit',
    skip: '$skip',
    unwind: '$unwind',
    sample: '$sample',
    strLenBytes: '$strLenBytes',
    strLenCP: '$strLenCP',
    substr: '$substr',
    toLower: '$toLower',
    toUpper: '$toUpper',
    meta: '$meta',
    // 其他
    // 字符串
    str: '$str',
}

let App = {
    name: 'App',
    data: () => {
        return {
            sharedState: store.state,
            appName: 'Farfetch Crawler Admin',
            book: 'book1'
        }
    },
    components: {
        Css, HeartBeat
    },
    template: template,
    mounted: () => {
        const {proxy} = Vue.getCurrentInstance();
        console.log('%s mounted', proxy.$options.name);
        proxy.initApiDocs();
    },
    methods: {
        initApiDocs() {
            api.swagger.apiDocs().then(res => {
                if (res.status === 200 && res.data && res.data.components) {
                    this.sharedState.apiDocs = res.data;
                    console.log('load apiDocs', this.sharedState.apiDocs);
                }
            }).catch(e => {
                console.log('load apiDocs error', e)
            });
        }
    }
};
